<template>
	<el-dialog :title="title" v-model="drawer" width="700px" :append-to-body="true" @close="close">
		<template v-for="(item,index) in memberLabelCategoryList">
		  <h5>{{item.name}}</h5>
		 <el-checkbox-group
		    v-model="selectMemberLabelIds"
		    @change="handleCheckedCitiesChange"
		  >
		  
		  <template v-for=" l in memberLabelList">
			  <el-checkbox v-if="l.labelCate == item.id" :key="l.id" :label="l.id">{{
				l.labelName
			  }}</el-checkbox>
		  </template>
		    
		  </el-checkbox-group>
		</template>
		
		
		
	<template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
		<el-button size="small" @click="selectBatch" type="primary"  :disabled="selectMemberLabelIds.length < 1">确认选择</el-button>
      </span>
    </template>
	</el-dialog>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {createMemberLabel} from '/@/api/pms/spu'
	export default {
		name: 'MemberLabelDetail',
		props: {
			dialogDrawer: {
				type: Boolean,
				default: false
			},
			isAdd: {
				type: Boolean,
				default: false
			},
			memberLabelCategoryList: {
				type: Array,
				default: []
			},
			memberLabelList: {
				type: Array,
				default: []
			},
			selectMemberLabelIds: {
				type: Array,
				default: []
			},
		},
		setup(props, context) {
			const {
				dialogDrawer,
				isAdd,
				memberLabelCategoryList,
				memberLabelList,
				selectMemberLabelIds
			} = toRefs(props)
			const drawer = computed({
				get: () => dialogDrawer.value,
				set: val => {
					context.emit('update:dialogDrawer', val)
				}
			})
			const checkAll = ref(false)
			const isIndeterminate = ref(true)
			const state = reactive({
				memberList:[],
				checkList:[],
				multipleData:[]
			})
			const close = () => {
				context.emit('update:dialogDrawer', false)
			}
			const submitForm = async (formEl) => {}
			const resetForm = (formEl) => {
				if (!formEl) return
				context.emit('update:dialogDrawer', false)
				formEl.resetFields()
			}
			const selectBatch = () => {
				context.emit('onMemberLabelSubmit', selectMemberLabelIds.value)
			}
			const handleCheckedCitiesChange = () => {
				
			}
			/* onMounted(()=>{
				console.log(selectMemberLabelIds )
				console.log(selectMemberLabelIds.value )
				state.checkList = selectMemberLabelIds.value 
			}) */
			return {
				drawer,
				submitForm,
				resetForm,
				selectBatch,
				close,
				...toRefs(state)
			}
		}

	}
</script>

<style>
</style>
